<script setup lang="ts">
import { computed, toRefs } from "vue";
import { PaginationProps } from "ant-design-vue";
import {
  ITableColumn,
  ITableParams,
  TRowkeyRecord,
} from "@/utils/types/table.ts";

const props = defineProps<{
  title: string;
  loading: boolean;
  setPages: ITableParams;
  total: number;
  columns: ITableColumn[];
  listData: Array<unknown>;
  rowSelection: object;
  innerColumns: ITableColumn[];
  innerKey: string;
  rowKey: string;
  bordered: { type: boolean; default: true };
}>();
const emit = defineEmits(["tableChange", "operHandle", "update:setPages"]);
const {
  total,
  title,
  setPages,
  columns,
  innerColumns,
  innerKey,
  rowKey,
  bordered,
} = toRefs(props);

const pagination = computed(() => ({
  total: total.value,
  current: setPages.value.pageNum,
  pageSize: setPages.value.pageSize,
  showQuickJumper: true,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "30"],
}));
const rowBtnShow = (curStatus: string, arrs: Array<string>) => {
  return arrs.includes(curStatus);
};
const tableChange = (pag: PaginationProps) => {
  const params = {
    ...setPages.value,
    pageNum: pag.current,
    pageSize: pag.pageSize,
  };
  emit("tableChange", params);
};

const operHandle = (fun: string, row: unknown, type: string) => {
  emit("operHandle", fun, row, type);
};
</script>

<template>
  <a-card :title="title" style="margin-top: 20px" :bordered="bordered">
    <template #extra>
      <slot name="table-right"></slot>
    </template>
    <a-table
      :columns="columns"
      :data-source="listData"
      :locale="{ emptyText: '暂无数据' }"
      :pagination="pagination"
      :scroll="{ x: 'max-content' }"
      @change="tableChange"
      :loading="loading"
      :rowKey="(record: TRowkeyRecord) => (rowKey ? record[rowKey] : record.id)"
      :row-selection="rowSelection"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataType && column.dataType === 'select'">
          {{ record[column.dataIndex]?.message }}
        </template>
        <slot name="table-info" :tableData="{ column, record }"></slot>
        <template v-if="column.dataIndex === 'operation'">
          <span v-for="(oper, idx) in column.handle" :key="idx">
            <a-button
              class="abtn-link"
              type="link"
              v-if="
                oper.normal ||
                rowBtnShow(record[oper.showkey[0]].name, oper.showkey[1])
              "
              v-hasPermi="oper.hasPermi"
              @click="operHandle(oper.funp[0], record, oper.funp[1])"
            >
              {{ oper.title }}
            </a-button>
          </span>
          <slot name="custom-btn" :tableData="{ column, record }"></slot>
        </template>
      </template>
      <template v-if="innerColumns" #expandedRowRender="{ record }">
        <a-table
          :scroll="{ x: 'max-content' }"
          :columns="innerColumns"
          :data-source="record[innerKey]"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <slot name="innertable" :tableData="{ column, record }"></slot>
          </template>
        </a-table>
      </template>
    </a-table>
    <div
      :style="{
        marginTop: listData.length ? '-40px' : '10px',
        width: '50%',
        height: '22px',
      }"
    >
      <slot name="table-bottom-left"></slot>
    </div>
  </a-card>
</template>
